<template>
  <picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange" @columnchange="handleColumnChange">
    <slot></slot>
  </picker>
</template>

<script>
import CHINA_REGIONS from "./regions.json";
export default {
  props: {
    defaultRegions: {
      type: Array,
      default() {
        return [];
      },
    },
    defaultRegionCode: {
      type: String,
    },
    defaultRegion: [String, Array],
  },
  data() {
    return {
      cityArr: CHINA_REGIONS[0].childs,
      districtArr: CHINA_REGIONS[0].childs[0].childs,
      multiIndex: [0, 0, 0],
      isInitMultiArray: true,
    };
  },
  watch: {
    defaultRegion: {
      handler(region, oldRegion) {
        if (Array.isArray(region)) {
          // 避免传的是字面量的时候重复触发
          oldRegion = oldRegion || [];
          if (region.join("") !== oldRegion.join("")) {
            this.handleDefaultRegion(region);
          }
        } else if (region && region.length == 6) {
          this.handleDefaultRegion(region);
        } else {
          console.warn("defaultRegion非有效格式");
        }
      },
      immediate: true,
    },
  },
  computed: {
    multiArray() {
      return this.pickedArr.map((arr) => arr.map((item) => item.name));
    },
    pickedArr() {
      // 进行初始化
      if (this.isInitMultiArray) {
        return [CHINA_REGIONS, CHINA_REGIONS[0].childs, CHINA_REGIONS[0].childs[0].childs];
      }
      return [CHINA_REGIONS, this.cityArr, this.districtArr];
    },
  },
  methods: {
    handleColumnChange(e) {
      // console.log(e);
      this.isInitMultiArray = false;
      const that = this;
      let col = e.detail.column;
      let row = e.detail.value;
      that.multiIndex[col] = row;
      try {
        switch (col) {
          case 0:
            if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
              that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]];
              break;
            }
            that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs;
            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs;
            break;
          case 1:
            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs;
            break;
          case 2:
            break;
        }
      } catch (e) {
        // console.log(e);
        that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs;
      }
    },
    handleValueChange(e) {
      // 结构赋值
      let [index0, index1, index2] = e.detail.value;
      let [arr0, arr1, arr2] = this.pickedArr;
      let address = [arr0[index0], arr1[index1], arr2[index2]];
      // console.log(address);
      this.$emit("getRegion", address);
    },
    handleDefaultRegion(region) {
      const isCode = !Array.isArray(region);
      this.isInitMultiArray = false;
      let children = CHINA_REGIONS;
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < children?.length; j++) {
          let condition = isCode ? children[j].code == region.slice(0, (i + 1) * 2) : children[j].name.includes(region[i]);
          if (condition) {
            // 匹配成功进行赋值
            // console.log(i,j,children.length-1);
            children = children[j].childs;
            if (i == 0) {
              this.cityArr = children;
            } else if (i == 1) {
              this.districtArr = children;
            }
            this.$set(this.multiIndex, i, j);
            // console.log(this.multiIndex);
            break;
          } else {
            // 首次匹配失败就用默认的初始化
            // console.log(i,j,children.length-1);
            if (i == 0 && j == children.length - 1) {
              this.isInitMultiArray = true;
            }
          }
        }
      }
    },
  },
};
</script>
